<template>
    <div>
        <div>
            <!-- 搜索表单区域 -->
            <common-form ref="searchUserFormRef" inline :form="searchForm" :formLabel="searchFormLabel" >
                <el-button type="primary" icon="el-icon-search" size="mini" >搜索</el-button>
                <el-button  icon="el-icon-refresh" size="mini" >重置</el-button>
            </common-form>

            <!-- 表格 开始 -->
            <demo-table></demo-table>
            <!-- 表格 结束 -->

        </div>
    </div>
</template>

<script>
import CommonForm from '../../components/CommonForm'
import demoTable from './demoTable'

export default {
  components: {
    CommonForm,
    demoTable

  },
  data () {
    return {
      // 搜索表单
      searchForm: {
        text: '', // 用户名
        sex: '',
        status: '',
        date: ''
      },
      // 搜索表单label
      searchFormLabel: [
        {
          model: 'text',
          label: '用户名',
          type: 'input'
        },
        {
          model: 'sex',
          label: '性别',
          type: 'select',
          opts: [
            {
              value: '',
              label: '全部'
            },
            {
              value: 0,
              label: '男生'
            },
            {
              value: 1,
              label: '女生'
            }
          ]
        },
        {
          model: 'status',
          label: '状态',
          type: 'select',
          opts: [
            {
              value: '',
              label: '全部'
            },
            {
              value: 1,
              label: '可用'
            },
            {
              value: 0,
              label: '禁用'
            }
          ]
        },
        {
          model: 'date',
          label: '时间',
          type: 'date'
        }
      ],
      // 用户数据
      userTable: [],
      // 用户数据label
      userTableLabel: [
        {
          prop: 'headUrl',
          label: '头像',
          type: 'headImg'
        },
        {
          prop: 'username',
          label: '用户名',
          type: ''
        },
        {
          prop: 'age',
          label: '年龄'
        },
        {
          prop: 'sexLabel',
          label: '性别',
          type: 'tag'
        },
        {
          prop: 'email',
          label: '绑定邮箱'
        },
        {
          prop: 'phone',
          label: '绑定电话'
        },
        {
          prop: 'status',
          label: '状态',
          type: 'switch'
        },
        {
          prop: 'createTime',
          label: '注册日期'
        }
      ],
      // table配置对象
      config: {
        loading: false,
        current: 0,
        size: 0,
        total: 0,
        btn: []
      },
      // 请求页面参数
      pageConfig: {
        text: '',
        sex: '',
        email: '',
        phone: '',
        status: '',
        leftTime: '',
        rightTime: '',
        condition: '',
        current: 1,
        size: 5
      },
      // 控制按钮是否可用
      disAbled: true,
      // 选中表格数据返回数组
      multipleSelection: [],
      // 导出表格的所有数据缓存
      allSelection: [],
      // 自定义导出 excel 表头
      excelHeader: ['用户名', '密码', '年龄', '性别', '邮箱', '电话', '账号状态', '注册日期', '更改日期'],
      // 自定义导出 excel 字段
      excelVal: ['username', 'password', 'age', 'sexLabel', 'email', 'phone', 'statusLabel', 'createTime', 'updateTime'],
      // 自定义导出 excel 文件名
      excelTitle: '用户列表'
    }
  },
  methods: {

  },

  created () {
  }
}
</script>

<style lang="scss" scoped>

</style>
